"use client";
import { UserCtx } from "@/app/(root)/layout";
import userService from "@/app/services/user.service";
import Link from "next/link";
import { use, useContext, useEffect, useState } from "react";

export default function PageHeader() {
  const { user, setUser } = useContext(UserCtx);

  useEffect(() => {
    const loading = async () => {
      const user = await userService.getMe();
      console.log(user);
      setUser(user);
    };

    loading();
  }, []);

  return (
    <header style={{ flex: 1 }} className="header">
      <Link href="/" className="logo" passHref>
        <img src="/images/logo.png" alt="" />
      </Link>
      <nav className="navbar">
        <Link href={"/"} legacyBehavior passHref>
          Главная
        </Link>
        <Link href={"/about"} legacyBehavior passHref>
          О нас
        </Link>
        <Link href={"/menu"} legacyBehavior passHref>
          Меню
        </Link>
        <Link href={"/chefs"} legacyBehavior passHref>
          Повара
        </Link>
        <Link href={"/contacts"} legacyBehavior passHref>
          Контакты
        </Link>
        <Link href={"/cart"} legacyBehavior passHref>
          Корзина
        </Link>
        {user?.role.toString() === "ADMIN" ? (
          <>
            <Link href={"/manage"} legacyBehavior passHref>
              Управление меню
            </Link>
            <Link href={"/orders"} legacyBehavior passHref>
              Заказы
            </Link>
          </>
        ) : null}
      </nav>
      <div className="icons">
        <Link href="/sign-in" legacyBehavior passHref>
          <div className="fas fa-user" id="cart-btn">
            <span
              style={{ fontSize: "15px", marginLeft: "10px" }}
              className="colored"
            >
              {user?.name ? user.name : "Войти"}
            </span>
          </div>
        </Link>
      </div>
    </header>
  );
}
